<script setup lang="ts">
import { onMounted } from 'vue'

import { userNav } from './composable/user-nav'
const { cellList, orderNavList } = userNav()

import { userInfo } from './composable/user-info'
const { userInfoData, getUserInfo } = userInfo()

import { onUserLogOut } from './composable/user-logout'

onMounted(() => {
  getUserInfo()
})
</script>

<template>
  <div class="user-page">
    <div class="user-page-head">
      <div class="top">
        <van-image
          round
          fit="cover"
          :src="
            userInfoData?.avatar ||
            'https://yanxuan-item.nosdn.127.net/ef302fbf967ea8f439209bd747738aba.png'
          "
        />
        <div class="name">
          <p>{{ userInfoData?.account }}</p>
          <p>
            <van-icon name="edit" />
          </p>
        </div>
      </div>
      <van-row>
        <van-col span="6">
          <p>{{ userInfoData?.collectionNumber }}</p>
          <p>收藏</p>
        </van-col>
        <van-col span="6">
          <p>{{ userInfoData?.likeNumber }}</p>
          <p>关注</p>
        </van-col>
        <van-col span="6">
          <p>{{ userInfoData?.score }}</p>
          <p>积分</p>
        </van-col>
        <van-col span="6">
          <p>{{ userInfoData?.collectionNumber }}</p>
          <p>优惠券</p>
        </van-col>
      </van-row>
    </div>
    <div class="user-page-order">
      <div class="head">
        <h3>药品订单</h3>
        <router-link to="/order">
          全部订单 <van-icon name="arrow" />
        </router-link>
      </div>
      <van-row>
        <van-col
          v-for="item in orderNavList"
          :key="item.status"
          span="6"
          @click="() => $router.push(`/order?status=${item.status}`)"
        >
          <van-badge :content="userInfoData?.orderInfo[item.key] || ''">
            <cp-icon :name="item.icon" />
          </van-badge>
          <p>{{ item.label }}</p>
        </van-col>
      </van-row>
    </div>

    <div class="user-page-group">
      <h3>快捷工具</h3>
      <van-cell
        v-for="item in cellList"
        :key="item.path"
        :title="item.label"
        :to="item.path"
        :replace="false"
        is-link
        :border="false"
      >
        <template #icon><cp-icon name="user-tool-01" /></template>
      </van-cell>
    </div>

    <div class="logout" @click="onUserLogOut">退出登录</div>
  </div>
</template>

<style scoped lang="scss">
.user-page {
  background-color: var(--cp-bg);
  min-height: calc(100vh - 50px);
  padding: 0 15px 15px;

  // 头部
  &-head {
    height: 200px;
    background: linear-gradient(
      180deg,
      rgba(44, 181, 165, 0.46),
      rgba(44, 181, 165, 0)
    );
    margin: 0 -15px;
    padding: 0 15px;

    .top {
      display: flex;
      padding-top: 50px;
      align-items: center;

      .van-image {
        width: 70px;
        height: 70px;
      }

      .name {
        padding-left: 10px;

        p {
          &:first-child {
            font-size: 18px;
            font-weight: 500;
          }

          &:last-child {
            margin-top: 10px;
            color: var(--cp-primary);
            font-size: 16px;
          }
        }
      }
    }

    .van-row {
      margin: 0 -15px;
      padding-top: 15px;

      p {
        text-align: center;

        &:first-child {
          font-size: 18px;
          font-weight: 500;
        }

        &:last-child {
          color: var(--cp-dark);
          font-size: 12px;
          padding-top: 4px;
        }
      }
    }
  }

  // 订单
  &-order {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    padding-bottom: 15px;

    .head {
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      padding: 0 15px;

      a {
        color: var(--cp-tip);
      }
    }

    .van-col {
      text-align: center;

      .cp-icon {
        font-size: 28px;
      }

      p {
        font-size: 12px;
        padding-top: 4px;
      }
    }
  }

  // 分组
  &-group {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    h3 {
      padding-left: 16px;
      line-height: 44px;
    }

    .van-cell {
      align-items: center;
    }

    .cp-icon {
      font-size: 17px;
      margin-right: 10px;
    }
  }

  .logout {
    display: block;
    margin: 20px auto;
    width: 100px;
    text-align: center;
    color: var(--cp-price);
  }
}
</style>
